<template>
	<view>
		<musicHead title="搜索" :showIcon="true" textHeadColor="#000" className="search"></musicHead>
		<!-- 搜索框 -->
		<view class="searchInput">
			<text class="iconfont icon-Magnifier icon-left"></text>
			<input type="text" placeholder="搜索歌曲" class="input" v-model="keywords" @confirm="enter"/>
			<text class="iconfont icon-guanbi1 icon-right" v-show="keywords" @click="resetKeywords"></text>
		</view>
		<view class="container">
			<scroll-view scroll-y="true">
				<!-- 历史记录和热搜榜 -->
				<view v-if="!keywords">
					<!-- 历史记录 -->
					<view class="history" v-if="keywordsHistory.length">
						<view class="head">
							<view class="title">历史记录</view>
							<view class="iconfont icon-icon1 icon" @click="clearHistory"></view>
						</view>
						<view class="content">
							<view class="content-item" v-for="item,index in keywordsHistory" :key="index" @click="toSearchByHistory(item)">{{item}}</view>
						</view>
					</view>
					<!-- 热搜榜 -->
					<view class="hotList">
						<view class="title">热搜榜</view>
						<view class="content" v-for="item,index in hotList" :key="index" @click="toSongListByHot(item.searchWord)">
							<view class="number">{{index + 1}}</view>
							<view class="song" >
								{{item.searchWord}}
								<image class="hot" v-if="item.iconUrl" :src="item.iconUrl" :style="{left:(item.searchWord.length) * 32 + 'rpx'}"></image>
							</view>
							
							<view class="count">{{item.score}}</view>
						</view>
					</view>
				</view>
				
				<!-- 搜索建议 -->
				<view class="search-suggest" v-if="isSuggest">
					<view class="keywords-show" v-if="keywords">搜索“{{keywords}}”</view>
					<view class="content" v-for="item,index in allMatch" :key="index" @click="getSearchSong">
						<view class="iconfont icon-Magnifier icon"></view>
						<view class="text">{{item.keyword}}</view>
					</view>
				</view>
				
				<!-- 搜索歌曲 -->
				<!-- 为什么加 &&songs.length? 因为当直接点击 × icon删除全部关键字的时候，会显示搜索歌曲列（border-top） -->
				<view class="search" v-if="!isSuggest&&songs.length">
					<view class="content" v-for="item in songs" :key="item.id" @click="toDetail(item.id)">
						<view class="song">
							<view class="songName app-text-ellipsis">{{item.name}}</view>
							<view class="singer app-text-ellipsis">{{item.artists[0].name}} - {{item.album.name}}</view>
						</view>
						<view class="iconfont icon-bofang icon"></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {searchSuggest,search,searchHot} from '../../common/api.js'
	export default{
		data(){
			return{
				// 搜索关键字
				keywords:'',
				// 搜索建议
				allMatch:[],
				// 搜索的歌曲
				songs:[],
				// 控制搜索建议与搜索歌曲框是否显示
				isSuggest:true,
				// 热搜榜
				hotList:[],
				// 搜索历史记录
				keywordsHistory:[],
				// immediate数据标识为true表示直接跳过搜索推荐，进入搜索歌曲列表
				immediate:false
			}
		},
		onLoad(){
			// 热搜榜
			searchHot().then(res=>{
				// console.log(res)
				this.hotList = res.data.data
			})
			// 加载时，获取历史记录
			this.getHistory()
		},
		methods:{
			resetKeywords(){
				this.keywords = ''
				this.isSuggest = false
				this.allMatch = []
				this.songs = [],
				this.immediate = false
			},
			// 获取搜索的歌曲
			getSearchSong(){
				// 保存历史记录
				// this.keywordsHistory.push(this.keywords)
				// 后进在前
				this.keywordsHistory.unshift(this.keywords)
				// 去重
				this.keywordsHistory = [...new Set(this.keywordsHistory)]
				// 将历史数据存放至本地缓存
				uni.setStorage({
					key:'historySearch',
					data:this.keywordsHistory
				})
				search({keywords:this.keywords}).then(res=>{
					this.songs = res.data.result.songs
				})
				// 显示歌曲列表页
				this.isSuggest = false
			},
			// 搜索框获取焦点
			inputFocus(){
				// keywords不为空，并且输入框获取焦点，要显示suggest
				// 因为已经获取歌曲展示的时候，再次点击搜索框输入时，要显示suggest
				if(this.songs.length&&this.keywords){
					this.isSuggest = true
				}
			},
			// 加载时获取历史记录
			getHistory(){
				uni.getStorage({
					key:'historySearch',
					success:(res)=>{
						this.keywordsHistory = res.data
					},
					// 如果失败，则表示已经清空缓存，需要重置数据
					fail:()=>{
						this.keywordsHistory = []
					}
				})
			},
			// 清空历史记录
			clearHistory(){
				uni.removeStorage({
					key:'historySearch'
				})
				// 更新
				this.getHistory()
			},
			// 按下键盘回车，进行搜索
			enter(){
				if(this.keywords){
					this.getSearchSong()
					return 
				}
				// 弹框提示未输入
				uni.showToast({
					title:'您并没有输入',
					icon:'error'
				})
			},
			// 直接点击搜索记录进行搜索
			toSearchByHistory(keywords){
				this.keywords = keywords
				// 关闭歌曲推荐，直接显示歌曲搜索列表
				this.getSearchSong()
				// immediate数据标识表示直接跳过搜索推荐，进入搜索歌曲列表
				this.immediate = true
			},
			// 点击搜索歌曲进入歌曲详情页面
			toDetail(id){
				uni.navigateTo({
					url:`/pages/detail/detail?id=${id}`
				})
			},
			// 从热搜榜直接进入搜索歌曲列表
			toSongListByHot(keywords){
				this.keywords = keywords
				this.immediate = true
				this.getSearchSong()
			}
		},
		watch:{
			async keywords(){
				if(this.keywords){
					// 搜索建议
					const res = await searchSuggest({
						keywords:this.keywords,
						type:'mobile'
					})
					// console.log(res)
					// 当返回的数据为空时，应该使搜索结果为空 Object.keys()是间接判定对象是否为空的方法
					if(Object.keys(res.data.result).length === 0){
						this.allMatch = []
						// console.log('result为空')
					}else{
						this.allMatch = res.data.result.allMatch
						// 当不是直接跳转搜索歌曲列表页，才显示搜索推荐
						if(!this.immediate){
							// 显示suggest
							this.isSuggest = true
						}
					}
				}else{
					// 清除关键字至空的时候，清除allMatch
					this.allMatch = []
					// 清除songs
					this.songs = []
					// 重置
					this.immediate = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchInput{
		display: flex;
		align-items: center;
		height: 70rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		margin: 0 34rpx 22rpx;
		.icon-left{
			width: 76rpx;
			text-align: center;
		}
		.icon-right{
			width: 114rpx;
			text-align: center;
		}
		.input{
			font-size: 28rpx;
			width: 100%;
		}
	}
	
	.history{
		margin: 28rpx 32rpx 0;
		font-size: 28rpx;
		.head{
			display: flex;
			justify-content: space-between;
			margin-bottom: 36rpx;
			.title{
				font-weight: bold;
			}
			.icon{
				color: #a1a1a1;
				font-size: 28rpx;
			}
		}
		.content{
			width: 100%;
			font-size: 26rpx;
			display: flex;
			flex-wrap: wrap;
			.content-item{
				line-height: 62rpx;
				height: 62rpx;
				padding: 0 20rpx;
				background-color: #f7f7f7;
				border-radius: 30rpx;
				margin-right: 26rpx;
				margin-bottom: 22rpx;
			}
		}
	}
	.hotList{
		font-size: 28rpx;
		margin: 20rpx 32rpx 0;
		.title{
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 16rpx;
		}
		.content{
			line-height: 80rpx;
			.number{
				font-size: 26rpx;
				text-align: center;
				width: 36rpx;
				margin-right: 26rpx;
				float: left;
			}
			.song{
				font-size: 30rpx;
				width: 520rpx;
				position: relative;
				float: left;
				.hot{
					width: 30rpx;
					height: 28rpx;
					position: absolute;
					top: 26rpx;
					// left 根据歌曲名字长度动态生成;
				}
			}
			.count{
				float: right;
				font-size: 22rpx;
				color: #c5c5c5;
				width: 104rpx;
			}
		}
	}
	.search-suggest{
		width: 100%;
		color: #474747;
		font-size: 28rpx;
		.keywords-show{
			color: #306297;
			margin: 0 32rpx;
			height: 100rpx;
			line-height: 100rpx;
		}
		.content{
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 32rpx;
			display: flex;
			.icon{
				color: #bfbfbf;
				width: 54rpx;
				font-size: 34rpx;
			}
			.text{
				width: 100%;
			}
		}
	}
	.search{
		width: 100%;
		color: #000;
		font-size: 28rpx;
		border-top: 2rpx solid #e1e1e1;
		// box-sizing: border-box;
		.content{
			height: 124rpx;
			margin: 0 32rpx;
			border-bottom: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			.song{
				width: 634rpx;
				font-size: 30rpx;
				line-height: 46rpx;
				.songName{
					width: 620rpx;
				}
				.singer{
					font-size: 24rpx;
					line-height: 44rpx;
					color: #8c8c8c;
				}
			}
			.icon{
				font-size: 50rpx;
				color: #bdbdbd;
				text-align: center;
			}
		}
	}
</style>
